{extend name="common/base" /}
{block name="head"}
{__block__}
{load file="/static/dist/layui/css/layui.css" /}
{load file="/static/page/page.css" /}
{/block}
{block name="body"}

<div class="layui-body">
  <div class='undercover-header' style="padding: 10px;">
    <blockquote class="layui-elem-quote">词库</blockquote>
    <div class="btn-box" style="text-align: right;">
      <button class="layui-btn layui-btn-sm add-btn">添加</button>
      <button class="layui-btn layui-btn-sm del-btn">删除</button>
    </div>
  </div>
  <table class="layui-table">
    <colgroup>
      <col>
      <col>
      <col>
      <col>
      <col>
    </colgroup>
    <thead>
    <tr>
      <th lay-data="{field:'',type:'checkbox',width:60,fixed: 'left'}"><input type="checkbox" class="checkboxall" name="check" lay-skin="primary" lay-filter="allChoose"></th>
      <th lay-data="{field:'id',width:100}">序号</th>
      <th lay-data="{field:'wordone'}">词语</th>
      <th lay-data = "{field:'opperate'}">操作</th>
    </tr>
    </thead>
    <tbody>
    {foreach name="list" item="vo"}
    <tr data-id="{$vo.id}">
      <td><input type="checkbox" name="check" lay-skin="primary"></td>
      <td>{$vo.id}</td>
      <td>{$vo.word}</td>
      <td><a href="" class="delItem">删除</a></td>
    </tr>
    {/foreach}
    </tbody>
  </table>
  {$page|raw}
</div>

{load file="/static/dist/layui/layui.js" /}

<script>
    //JavaScript代码区域
    layui.use(['table', 'jquery'], function () {
        var table = layui.table,
            $ = layui.$;
        layer = layui.layer
        table.render({
            elem: '#undercover'
            , height: 600
            , limit: 15
            , page: true
        });
        $(".checkboxall").click(function () {
            if ($(this).prop('checked') == true) {
                $("input[name='check']").prop('checked', true);
            } else {
                $("input[name='check']").prop('checked', false);
            }
        });
        $('table tbody').on('click','input',function(){
            $('table tbody input').each(function(){
                if($(this).attr('checked')=='checked'){
                    $(".checkboxall").prop('checked', false);
                }
            })
        })
        // 以回车符分割字符串
        function foo(str) {
            var temp = str.split(/[\n,]/g);
            console.log(temp);
            return temp;
        }
        // 添加弹框
        var _htmlAdd='<form class="layui-form"><div class="layui-form-item">' +
            '<label class="layui-form-label" style="width:auto;">内容</label>' +
            '<div class="layui-input-block" style="margin-left:80px;">' +
            '<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>' +
            '</div>' +
            '</form>';
        // 添加
        $(".add-btn").click(function () {
            layer.open({
                title: '添加词语',
                area: ['380px', '300px'],
                content: _htmlAdd,
                btn:['确定','取消'],
                btnAlign:'c',
                btn1: function (index, type) {
                    var desc=$('textarea[name="desc"]').val();
                    console.log(desc);
                    if(desc==''){
                        alert('添加内容不能为空');
                    }else{
                        // 以回车间分割
                        var arr=foo(desc);
                        console.log(arr);
                        $.ajax({
                            type:'post',
                            url:'add_plan_word',
                            data:{list:arr},
                            dataType:'json',
                            success:function(data){
                                console.log(data);
                                if(data.status==1){
                                    console.log(data);
                                    layer.msg(data.msg,{icon:1});
                                    setTimeout(function(){
                                      window.location.reload();
                                    },2000)
                                }else{
                                    layer.msg(data.msg,{icon:5});
                                }
                            },
                            error:function(){
                                console.log('ajax请求失败');
                            }
                        })
                    }
                }
            })
        })
        // 批量删除
        $(".del-btn").click(function () {
            var str='';
            $('tbody input[type=checkbox]:checked').each(function(){
                str+=$(this).parents('tr').attr('data-id')+',';
            })
            str=str.slice(0,str.length-1);
            console.log(str);
            if(str==''){
                alert('请选择批量删除的选项');
            }else{
                layer.confirm('确定要批量删除吗？',{
                    title: '删除',
                    btn:['确定','取消'],
                    btn1: function (index, type) {
                        console.log(str);
                        $.ajax({
                            type:'get',
                            url:'del_plan_word',
                            data:{id_str:str},
                            dataType:'json',
                            success:function(data){
                                console.log(data);
                                if(data.status==1){
                                    layer.msg(data.msg,{icon:1});
                                    setTimeout(function(){
                                      window.location.reload();
                                    },2000)
                                }else{
                                    layer.msg(data.msg,{icon:5});
                                }
                            },
                            error:function(){
                                console.log('ajax请求失败');
                            }
                        })
                    }
                })
            }
        })
        // 单个删除
        $('table').on('click','.delItem',function(e){
            e.preventDefault();
            var that=$(this);
            var trId = that.parents('tr').attr('data-id');
            layer.confirm('确定要删除吗？',{
                title: '删除',
                btn:['确定','取消'],
                btn1: function (index, type) {
                    console.log(trId);
                    console.log(typeof trId);
                    $.ajax({
                        type:'get',
                        url:'del_plan_word',
                        data:{id_str:trId},
                        dataType:'json',
                        success:function(data){
                            console.log(data);
                            if(data.status==1){
                                layer.msg(data.msg,{icon:1});
                                setTimeout(function(){
                                  window.location.reload();
                                },2000)
                            }else{
                                layer.msg(data.msg,{icon:5});
                            }
                        },
                        error:function(){
                            console.log('ajax请求失败');
                        }
                    })
                }
            })
        })
    });
</script>

{/block}
{block name="foot"}
{__block__}
